<template>
  <div class="planMaintain">
    <el-dialog :title="option.title" :visible.sync="isShow" :close-on-click-modal="false" width="70%" @close="closeDialog" @open="openDialog">
      <el-card>
        <el-form :model="ruleForm" size="small" label-position="left" ref="ruleForm" class="demo-ruleForm">
          <el-row :gutter="10">
            <el-col :lg="4" :md="6">
              <el-form-item label="计算流水" prop="CALCSERNO">
                <el-select v-model.trim="ruleForm.CALCSERNO" clearable placeholder="请选择计算流水" size="small">
                  <el-option
                    v-for="(item,index) in tableData.CALCSERNOINFO"
                    :key="index"
                    :label="item.CALCSERNO"
                    :value="item.CALCSERNO">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item label="告警信息" prop="WARNINFO">
                <el-input v-model.trim='ruleForm.WARNINFO' placeholder="请输入告警信息" maxlength="10"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="6" :lg="4">
              <el-form-item label='告警类型' prop='DEALTYPE'>
                <el-select v-model.trim="ruleForm.DEALTYPE" clearable placeholder="请选择告警类型" size="small">
                  <el-option
                    v-for="item in DEALTYPEOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="3" :lg='3' style="margin-top:32px;">
              <el-button type='primary' size='small' icon='el-icon-search' @click="warnInfoQuery('search')">查询</el-button>
            </el-col>
            <el-col :md="3" :lg='3' style="margin-top:32px;">
              <el-button type='warning' size='small' icon='el-icon-refresh' @click="clearForm('ruleForm')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData.WARNINGINFO" style="width: 100%" ref="multipleTable">
          <el-table-column prop="WARNINFO" label="告警信息" align="center" width="400"></el-table-column>
          <el-table-column prop="BADNESS" label="伤害值" align="center"></el-table-column>
          <el-table-column prop="DEALTYPE" label="告警类型" align="center" :formatter="DEALTYPEFormat"></el-table-column>
        </el-table>
        <el-pagination style="text-align: right; margin-top:20px;padding-right: 40px;" 
          :page-sizes="[10, 20, 50, 100]" 
          :page-size="pageSize" 
          @size-change="handleInSizeChange" 
          @current-change="handleInCurrentChange" 
          :current-page="currpage" 
          layout="sizes, total, prev, pager, next, jumper" 
          :total="tableTotal">
        </el-pagination>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="option.isShow=false;" size="mini">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/common/utils/requestWFM";
import warnInfoQuery from "@/message/wfm/intelligenceSchedule/scheduleReport/warnInfoQuery";

export default {
  props: { option: Object },
  components: {

  },
  data() {
    return {
      ruleForm:{
        CALCSERNO:'',
        WARNINFO:'',
        DEALTYPE:'',
      },
      tableData:[],
      tableTotal: 1,
      currpage: 1,
      pageSize: 10,
      DEALTYPEOptions: [
        {
          value: '0',
          label: '严重'
        },
        {
          value: '1',
          label: '高'
        },
        {
          value: '2',
          label: '中'
        },
        {
          value: '3',
          label: '低'
        },
      ],
    }
  },
  computed: {
    isShow: {
      get() {
        return this.option.isShow;
      },
      set(value) {
        this.option.isShow = value;
      }
    }
  },
  mounted(){
    // this.warnInfoQuery();
  },
  methods: {
    openDialog() {
      this.warnInfoQuery();
      if (this.$refs['ruleForm'] != undefined) {
        this.$refs['ruleForm'].clearValidate();
      }
    },
    clearForm(formName) {
      this.$refs[formName].resetFields();
      this.$refs['ruleForm'].clearValidate();
    },
    DEALTYPEFormat(row, column){
      return row.DEALTYPE === '0'?'严重':row.DEALTYPE === '1'
        ?'高':row.DEALTYPE === '2'?'中':row.DEALTYPE === '3'?'低':''; 
    },
    //前端分页
    handleInCurrentChange(val) {
      this.currpage = val;
      this.warnInfoQuery();
    },
    handleInSizeChange(val) {
      this.pageSize = val;
      this.warnInfoQuery();
    },
    async warnInfoQuery(data){
      if(data){
        this.currpage = 1;
      }
      let resBody = new warnInfoQuery();
      resBody.data.SPID = this.$parent.PlanMaintain;
      resBody.data.CALCSERNO = this.ruleForm.CALCSERNO;
      resBody.data.WARNINFO = this.ruleForm.WARNINFO;
      resBody.data.DEALTYPE = this.ruleForm.DEALTYPE;
      resBody.data.CurrPage = this.currpage;
      resBody.data.PageRowNum = this.pageSize;
      let response = await request(resBody);
      if (response.SYS_HEAD.ReturnCode == "000000") {
        this.tableData = response.BODY;
        this.tableTotal = response.BODY.TotalRowNum;
      } else {
        this.$message({
          type: "error",
          message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
        });
      }
    },
    //关闭弹窗
    closeDialog() {
      this.ruleForm={
        CALCSERNO:'',
        WARNINFO:'',
        DEALTYPE:'',
      };
      if (this.$refs['ruleForm'] != undefined) {
        this.$refs['ruleForm'].resetFields(); 
        this.$refs['ruleForm'].clearValidate();
      }
    },
  }
};
</script>

<style lang="scss">
.planMaintain{
  .el-input{
    width: 100%;
  }
}
</style>
